<template>
    <div>
        <el-cascader
            style="width:100%"
            v-model="value"
            :show-all-levels="false"
            :options="initOptions"
            clearable
            @expand-change="expandChange"
            @change='handleChange'>
        </el-cascader>
    </div>
</template>
<script>
export default {
    props:{
        allOptions:{
            type:Array,
            default:()=>([])
        },
        loadSize:{
            type:Number,
            default:11,
        },
    },
    data(){
        return {
            value:null,
            fatherVal:null,//第一级节点
            initOptions:[],
        }
    },
    watch:{
        allOptions:{
            handler:function(val,old){
                this.allOptions=val;
                this.initOptions=val && val.map(item=>{
                    return {
                        ...item,
                        children:item.children.filter((it,idx)=>{return idx<this.loadSize})
                    }
                });
            }
        }
    },
    mounted(){
        //截取初始化部分数据
        // console.log("this.allOptions====",this.allOptions)
        // this.initOptions=this.allOptions && this.allOptions.map(item=>{
        //     return {
        //         ...item,
        //         children:item.children.filter((it,idx)=>{return idx<this.loadSize})
        //     }
        // });
    },
    methods:{
        //改变选中值
        handleChange(val){
           this.$emit('handleChange',val);
        },
        //展开节点值
        expandChange(val){
            this.$nextTick(()=>{
                //获取展开的所有面板dom
                let panel =document.querySelectorAll('.el-cascader-menu__wrap.el-scrollbar__wrap');
                let currentPanel=panel[panel.length-1];//最后一集面板
                this.fatherVal=val[0];
                if(currentPanel){
                   currentPanel.addEventListener('scroll',this.scrollPanel(currentPanel))
                }
            })
        },
        //滚动加载逻辑
        scrollPanel(el){
            return ()=>{
                const scrollTop = el.scrollTop;//dom顶部与可视窗口的距离
                const clientHeight = el.clientHeight;//可见区域高度
                const scrollHeight = el.scrollHeight;//整个都dom高度
                // 若scrollTop + clientHeight === scrollHeight 则说明滚动条到达了底部
                console.log("scrollTop+clientHeight----scrollHeight",scrollTop + clientHeight,scrollHeight);
                if(parseInt(scrollTop)+clientHeight+8>=scrollHeight){
                    const tem=[];
                    //获取当前父级下所有的children
                    let allOptions=this.allOptions.filter(item=>{return item.value==this.fatherVal})[0]?.children;
                    //循环当前展示的数组
                    this.initOptions.forEach(element=>{
                        //匹配父级
                        if(element.value==this.fatherVal){
                            //option中当前面板条数
                            const optionLen=element.children.length-1;
                            //options中当前面板条数
                            const allOptionsLen=allOptions.length-1;
                            if(optionLen>=allOptionsLen){
                                return 
                            }
                            const loadsize=optionLen+this.loadSize;
                            //比较当前加载数+当前展>allOptionsLe示数和总option的大小  如果大于总数，则说明已经展示的是所有数了，不用再去加载了，否则继续加载
                            const size=loadsize?allOptionsLen:loadsize;
                            for(var i=optionLen;i<size;i++){
                                tem.push(allOptions[i])
                            }
                            element.children.push(...tem)
                        }
                    })

                }
                //加载完新的数据之后，让滚动条停留在上次移动的位置
                setTimeout(()=>{
                    el.scrollTop=scrollTop;
                })
            }
        }
    }
}
</script>
<style lang='less'>

</style>